// 这是 main.js 是我们项目的JS入口文件

// 1. 导入 Jquery
// import *** from *** 是ES6中导入模块的方式
// 由于 ES6 的代码，太高级了，游览器解析不了，所以，这一行执行会报错
import $ from 'jquery'
// const $ = require('jquery')

// 使用 import 语法，导入 css 样式表
import './css/index.css'
// 注意: webpack，默认只能打包处理 JS 类型的文件，无法处理 其它的非 JS 类型的文件
// 如果要处理 非js类型的文件，我们需要手动安装一些 合适 第三方 loader 加载器;
// 1. 如果想要打包处理 css 文件，需要安装 cnpm i style-loader css-loader -D
// 2. 打开 webpack.config.js 这个配置文件，在里面，新增一个 配置节点，叫做 module, 它是一个对象;在 这个 module 对象身上，有个 rules 属性，这个 rules 属性时个 数组；这个数组中，存放了，所有第三方文件的 匹配和 处理规则；

import './css/index.less'
// cnpm i less-loader -D ;依赖cnpm i less -D

import './css/index.scss'
// cnpm i sass-loader -D;依赖cnpm i node-sass sass fibers  -D

// 注意： 如果要通过路径的形式，去引入 node_modules 中相关的文件，可以直接省略 路径前面的 node_modules 这一层目录，直接写 包的名称，然后后面跟上具体的文件路径
// 不写 node_modules 这一层目录 ，默认 就会去 node_modules 中查找
import 'bootstrap/dist/css/bootstrap.css'


// class 关键字，是ES6中提供的新语法，是用来 实现 ES6 中面向对象编程的方式
class Person {
    // 使用 static 关键字，可以定义静态属性
    // 所谓的静态属性，就是 可以直接通过 类名， 直接访问的属性
    // 实例属性： 只能通过类的实例，来访问的属性，叫做实例属性
    static info = { name: 'zs', age: 20 }
  }
  
  // 访问 Person 类身上的  info 静态属性
  console.log(Person.info)
  // 在 webpack 中，默认只能处理 一部分 ES6 的新语法，一些更高级的ES6语法或者 ES7 语法，webpack 是处理不了的；这时候，就需要 借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader 把 高级语法转为 低级的语法之后，会把结果交给 webpack 去打包到 bundle.js 中
// 通过 Babel ，可以帮我们将 高级的语法转换为 低级的语法
// 1. 在 webpack 中，可以运行如下两套 命令，安装两套包，去安装 Babel 相关的loader功能：
// 1.1 第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D  ; 更新了：cnpm i @babel/core babel-loader babel-plugin-transform-runtime -D


// 1.2 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D
// 2. 打开 webpack 的配置文件，在 module 节点下的 rules 数组中，添加一个 新的 匹配规则：
// 2.1 { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }
// 2.2 注意： 在配置 babel 的 loader规则的时候，必须 把 node_modules 目录，通过 exclude 选项排除掉：原因有俩：
// 2.2.1 如果 不排除 node_modules， 则Babel 会把 node_modules 中所有的 第三方 JS 文件，都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢；
// 2.2.2 哪怕，最终，Babel 把 所有 node_modules 中的JS转换完毕了，但是，项目也无法正常运行！
// 3. 在项目的 根目录中，新建一个 叫做 .babelrc  的Babel 配置文件，这个配置文件，属于JSON格式，所以，在写 .babelrc 配置的时候，必须符合JSON语法规范： 不能写注释，字符串必须用双引号
// 3.1 在 .babelrc 写如下的配置：  大家可以把 preset 翻译成 【语法】 的意思
        // {
        //   "presets": ["env", "stage-0"],
        //   "plugins": ["transform-runtime"]
        // }
// 4. 了解： 目前，我们安装的 babel-preset-env, 是比较新的ES语法， 之前， 我们安装的是 babel-preset-es2015, 现在，出了一个更新的 语法插件，叫做 babel-preset-env ，它包含了 所有的 和 es***相关的语法

  






  // Java  C#  实现面向对象的方式完全一样了，   class 是从后端语言中借鉴过来的， 来实现面向对象
  // var p1 = new Person()
  
  



  // function Animal(name){
  //   this.name  = name
  // }
  // Animal.info = 123
  
  // var a1 = new Animal('小花')
  
  // // 这是静态属性：
  // // console.log(Animal.info)
  // // 这是实例属性：
  // console.log(a1.name)